<template>
  <div>
      <el-form :inline="true" :model="query" label-width="100px" size="small">
        <!-- 关键词检索 -->
        <el-form-item>
          <span> 收支类型：</span>
          <el-form-item class="query-form-item">
             <el-select v-model="query.settlementtype" placeholder="请选择收支类型"  
                clearable
                @change="onSubmit">
                <el-option
                label="结算收入"
                value='1'
                >
                </el-option>
                <el-option
                label="转账支出"
                value='2'
                > 
                </el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item>
          <span> 明细类型：</span>
          <el-form-item class="query-form-item">
             <el-select v-model="query.capitaltype" placeholder="请选择明细类型"   clearable @change="onSubmit">
                <el-option label="订单收益" value='1' ></el-option>
                <el-option label="订单货款" value='2'></el-option>
                <el-option  label="公司分账转入" value='3' ></el-option>
                 <!-- 1.订单收益 2.货款（商品卖出后，上级分完收益后的结果） 3.公司分账收入 4 订单收益转出 5货款转出  6公司分账转出 7订单收益扣税 8订单收益扣税转出 9货款收益扣税 10货款收益扣税转出  -->
                <!-- <el-option  label="订单收益转出" value='4' ></el-option>
                <el-option  label="货款转出" value='5' ></el-option>
                <el-option  label="公司分账转出" value='6' ></el-option>
                <el-option  label="订单收益扣税" value='7' ></el-option> -->
                <el-option  label="订单收益扣税转出 " value='8' ></el-option>
                <!-- <el-option  label="货款收益扣税" value='9' ></el-option> -->
                <el-option  label="货款收益扣税转出" value='10' ></el-option>
                
            </el-select>
          </el-form-item>
        </el-form-item>
        
      </el-form>
      <!-- table表单 -->
     <el-table
        ref="singleTable"
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column label="序号" type="index" align="center" width="50" fixed>
        </el-table-column>
        <el-table-column prop="creationtime" align="center" label="明细生成时间" >
            <template slot-scope="scope">
                <i class="el-icon-time"  v-if="scope.row.creationtime!=null" style="margin-right:5px"></i> 
                <span v-if="scope.row.creationtime !=null">{{scope.row.creationtime | formatDateStr("yyyy-MM-dd hh:mm:ss")}} </span>
                <span></span>
            </template>
        </el-table-column>
        <el-table-column prop="settlementtype" align="center" label="收支类型" >
            <template slot-scope="scope">
                  <span v-if="scope.row.settlementtype ==1">结算收入</span>
                  <span v-if="scope.row.settlementtype ==2">转账支出</span>
            </template>
        </el-table-column>
        <el-table-column prop="capitaltype" align="center" label="明细类型" >
            <template slot-scope="scope">
                <span v-if="scope.row.capitaltype ==1">订单收益</span> 
                <span v-if="scope.row.capitaltype ==2">订单货款</span>
                <span v-if="scope.row.capitaltype ==3">公司分账转入</span>
                <span v-if="scope.row.capitaltype ==4">订单收益转出</span>
                <span v-if="scope.row.capitaltype ==5">货款转出</span>
                <span v-if="scope.row.capitaltype ==6">公司分账转出</span>
                <span v-if="scope.row.capitaltype ==7">订单收益扣税</span>
                <span v-if="scope.row.capitaltype ==8">订单收益扣税转出</span>
                <span v-if="scope.row.capitaltype ==9">货款收益扣税</span>
                <span v-if="scope.row.capitaltype ==10">货款收益扣税转出</span>
            </template>
        </el-table-column>
        <el-table-column prop="capitalquota" align="center" label="明细金额">
            <template slot-scope="scope">
                <span v-if="scope.row.settlementtype ==1" style="color:red;">+ ¥ {{scope.row.capitalquota}} </span>
                <span v-if="scope.row.settlementtype ==2">- ¥ {{scope.row.capitalquota}}</span>

            </template>

        </el-table-column>
        <el-table-column prop="remarks" align="center" label="备注" width="350">
            <template slot-scope="scope">
                <span v-if="scope.row.capitaltype ==1">订单编号：{{scope.row.remarks}}</span> 
                <span v-if="scope.row.capitaltype ==2">订单编号：{{scope.row.remarks}}</span>
                <span v-if="scope.row.capitaltype ==3">转出人：{{scope.row.remarks}}</span>
                <span v-if="scope.row.capitaltype ==4">订单编号：{{scope.row.remarks}}</span>
                <span v-if="scope.row.capitaltype ==5">订单编号：{{scope.row.remarks}}</span>
                <span v-if="scope.row.capitaltype ==6">转出人：{{scope.row.remarks}}</span>
                <span v-if="scope.row.capitaltype ==7">订单编号：{{scope.row.remarks}}</span>
                <span v-if="scope.row.capitaltype ==8">订单编号：{{scope.row.remarks}}</span>
                <span v-if="scope.row.capitaltype ==9">订单编号：{{scope.row.remarks}}</span>
                <span v-if="scope.row.capitaltype ==10">订单编号：{{scope.row.remarks}}</span>
            </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagination-container"
        background
        :page-size="query.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :current-page="query.currentPage"
        :page-sizes="[5, 10, 20, 30, 50]"
        :total="totalNumber"
      ></el-pagination>
    
  </div>
</template>
<script>
import {getPayList} from  "../../api/fundsManagement/index"
export default {
  data() {
    return {
      tableData: [],
      query: {
        currentPage: 1,
        pageSize: 5,
        settlementtype: '',
        capitaltype:"",
      },
      totalNumber: 0,
      loading: false,
       
    }
  },
 
  methods: {
   
    //搜索
    onSubmit() {
      this.query.currentPage = 1
      this.getList()
    },
   
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.query.currentPage = val
      this.getList()
    },
    
    //获取表格列表
    getList(){
        this.loading =true
        getPayList(this.query)
        .then(res=>{
            if(res.code !=0){
                this.$message.warning(res.message)
                this.loading=false
                return false
            }
            // console.log(res)
            this.tableData =res.data.list
            this.totalNumber =res.data.totalNumber
            this.loading =false
        })
        .catch(err=>{
            this.tableData = []
            this.loading =false
        })
    }

  },
   created() {
    this.getList()
  },
}
</script>
